<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <el-input v-if="user.role !== 'USER'"
        size="mini"
        style="width: 200px; margin-right :10px; font-size:13px; "
        v-model="params.name"
        placeholder="请输入患者姓名查询"
      ></el-input>
      <el-select v-if="user.role !== 'USER'"
        size="mini"
        style="width: 200px; margin-right :10px; font-size:13px; "
        v-model="params.state"
        placeholder="请选择状态"
      >
        <el-option label="待叫号" value="-1"></el-option>
        <el-option label="已叫号" value="1"></el-option>
      </el-select>
      <el-date-picker
        v-model="date"
        style="margin-right :10px;"
        value-format="yyyy-MM-dd"
        size="mini"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <el-button size="mini" type="info" @click="findBySearch()" plain>查询</el-button>
      <el-button size="mini" type="warning" @click="reset()" plain>重置</el-button>
    </div>

    <!-- 表格 -->
    <div class="search" style="margin-top: 10px; font-size:12px;">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!--        <el-table-column prop="id" label="序号"></el-table-column>-->
        <el-table-column prop="patientName" label="患者姓名"></el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="appointmentTime" label="预约时间" show-overflow-tooltip></el-table-column>
        <el-table-column  v-if="user.role !== 'USER'" prop="status" label="挂号状态" :formatter="formatStatus" show-overflow-tooltip>
          <template slot-scope="scope">
            <span
              :style="{ color: formatStatus(scope.row, scope.column, scope.row.status).color }"
            >{{ formatStatus(scope.row, scope.column, scope.row.status).text }}</span>
          </template>
        </el-table-column>
        <el-table-column width="150px" label="操作" v-if="user.role === 'DOCTOR'">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">叫号</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "PatientView",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      params: {
        name: "",
        state: "",
        pageNum: 1,
        pageSize: 5
      },
      date: "",
      total: 0,
      tableData: []
    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();
  },
  methods: {
    // 条件查询
    findBySearch() {
      console.log(this.date);
      // 构建日期范围参数对象
      const dateRangeParams = {
        startDate: this.date ? this.date[0] : null,
        endDate: this.date ? this.date[1] : null
      };

      // 合并日期范围参数到 this.params 中
      const searchParams = Object.assign({}, this.params, dateRangeParams);

      request
        .get("/Patient/findBySearch", { params: searchParams })
        .then(res => {
          if (res.data && res.data.list) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.error("Error occurred while fetching data:", error);
        });
    },

    //重置
    reset() {
      this.params.name = "";
      this.params.state = "";
      this.date = "";
      this.findBySearch();
    },

    //叫号按钮
    handleEdit(index, row) {
      console.log("叫号");
      // request.get("/Patient/findByAccount", {params: {account: row.account}}).then(res => {
      //   this.updateForm = res.data;
      // })

      request
        .get("/Patient/updateStatus", { params: { id: row.id } })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("叫号成功!");
            this.findBySearch();
          }
        });
      console.log(index, row);
    },

    // 状态文字转换函数
    formatStatus(row, column, cellValue) {
      if (cellValue === "-1") {
        return { text: "待叫号", color: "#ff5500" };
      } else if (cellValue === "1") {
        return { text: "已叫号", color: "#04b3f8" };
      } else {
        return { text: "未知状态", color: "red" };
      }
    },

    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    }
  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
